<template>
  <div class="app-container">
    <transition name="el-zoom-in-top">
      <el-form v-show="show" ref="form" :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="账号">
          <el-input v-model="form.username" placeholder="账号" clearable />
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="form.name" placeholder="名称" clearable />
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="handleSearch">查询</el-button>
          <el-button icon="el-icon-close" plain @click="handleClearSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </transition>
    <el-row class="g-row">
      <template>
        <el-popconfirm title="确定取消授权吗？" @confirm="handleUnAuth(selectedList)">
          <el-button slot="reference" icon="el-icon-close" type="danger" plain :disabled="selectedList.length === 0">取消授权</el-button>
        </el-popconfirm>
      </template>
      <el-button icon="el-icon-plus" type="primary" plain @click="handleOpenDialog()">新填授权</el-button>
      <div style="float: right">
        <el-button icon="el-icon-sort" plain @click="show = !show">查询条件</el-button>
        <el-button icon="el-icon-refresh-left" plain @click="loadList(page.currentPage,page.size)">刷新</el-button>
      </div>
    </el-row>
    <el-row class="g-row">
      <el-table
        v-loading="loading"
        :data="tableData"
        stripe
        style="width: 100%"
        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
        @selection-change="selectedChange"
      >
        <el-table-column fixed="left" type="selection" width="55" />
        <el-table-column type="index" width="55" />
        <el-table-column prop="username" label="账号" width="170" />
        <el-table-column prop="name" label="名称" width="150" />
        <el-table-column prop="gender" label="性别" width="100">
          <template v-slot="scope">
            <span>{{ scope.row.gender == 0?'男':'女' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="birthday" label="生日" width="170" />
        <el-table-column prop="tel" label="电话" width="170" />
        <el-table-column prop="email" label="邮箱" width="170" />
        <el-table-column prop="address" label="地址" show-overflow-tooltip />
        <el-table-column prop="status" label="状态" width="100">
          <template v-slot="scope">
            <el-tag v-if="scope.row.status === false" type="success">正常</el-tag>
            <el-tag v-if="scope.row.status === true" type="danger">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="170" />
      </el-table>
    </el-row>
    <el-row class="g-row">
      <el-pagination
        :current-page="page.currentPage"
        :page-sizes="[10, 20, 30, 40, 50, 100]"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-row>

    <el-dialog
      :title="dialog.title"
      :visible.sync="dialog.visible"
      width="75%"
      :before-close="handleCloseDialog"
    >
      <el-form ref="dialogForm" :inline="true" :model="dialogForm" class="demo-form-inline">
        <el-form-item label="账号">
          <el-input v-model="dialogForm.username" placeholder="账号" clearable />
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="dialogForm.name" placeholder="名称" clearable />
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="handleDialogSearch">查询</el-button>
          <el-button icon="el-icon-close" plain @click="handleDialogClearSearch">重置</el-button>
        </el-form-item>
      </el-form>
      <el-row class="g-row">
        <el-table
          v-loading="dialogLoading"
          :data="dialogData"
          stripe
          style="width: 100%"
          :header-cell-style="{background:'#eef1f6',color:'#606266'}"
          @selection-change="diaLogSelectedChange"
        >
          <el-table-column fixed="left" type="selection" width="55" />
          <el-table-column type="index" width="55" />
          <el-table-column prop="username" label="账号" width="170" />
          <el-table-column prop="name" label="名称" width="150" />
          <el-table-column prop="gender" label="性别" width="100">
            <template v-slot="scope">
              <span>{{ scope.row.gender == 0?'男':'女' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="birthday" label="生日" width="170" />
          <el-table-column prop="tel" label="电话" width="170" />
          <el-table-column prop="email" label="邮箱" width="170" />
          <el-table-column prop="address" label="地址" show-overflow-tooltip />
          <el-table-column prop="status" label="状态" width="100">
            <template v-slot="scope">
              <el-tag v-if="scope.row.status === false" type="success">正常</el-tag>
              <el-tag v-if="scope.row.status === true" type="danger">禁用</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="170" />
        </el-table>
      </el-row>
      <el-row class="g-row">
        <el-pagination
          :current-page="dialogPage.currentPage"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          :page-size="dialogPage.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="dialogPage.total"
          @size-change="handleDialogSizeChange"
          @current-change="handleDialogCurrentChange"
        />
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloseDialog">取 消</el-button>
        <el-button type="primary" @click="handleSubmit(dialogSelectedList)">确 定</el-button>
      </span>
    </el-dialog>

  </div>

</template>

<script>
import RoleApi from '@/api/system/role.js'

export default {
  name: 'AssignUsers',
  data() {
    return {
      loading: true,
      dialogLoading: true,
      dialog: {
        visible: false,
        title: '新添授权'
      },
      show: true,
      page: {
        currentPage: 1,
        size: 10,
        total: 10
      },
      form: {
        username: '',
        name: ''
      },
      dialogForm: {
        username: '',
        name: ''
      },
      dialogPage: {
        currentPage: 1,
        size: 10,
        total: 10
      },
      dialogData: [],
      tableData: [],
      // 选中的值显示
      selectedList: [],
      dialogSelectedList: []
    }
  },
  created() {
    this.loadList(this.page.currentPage, this.page.size)
  },
  methods: {
    loadList(page, size) {
      this.loading = true
      RoleApi.listSysUserByRoleId(JSON.parse(JSON.stringify(this.form)), this.$route.params.roleId, page, size).then(res => {
        this.loading = false
        this.page.currentPage = res.data.currentPage
        this.page.size = res.data.size
        this.page.total = res.data.total
        this.tableData = res.data.records
      })
    },
    selectedChange(selectedList) {
      this.selectedList = JSON.parse(JSON.stringify(selectedList))
    },
    loadDialogList(page, size) {
      this.dialogLoading = true
      RoleApi.listUnAuthSysUserByRoleId(this.dialogForm, this.$route.params.roleId, page, size).then(res => {
        this.dialogPage.currentPage = res.data.currentPage
        this.dialogPage.size = res.data.size
        this.dialogPage.total = res.data.total
        this.dialogData = res.data.records
      })
      this.dialogLoading = false
    },
    handleDialogSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.loadDialogList(this.dialogPage.currentPage, val)
    },
    handleDialogCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.loadDialogList(val, this.dialogData.size)
    },
    handleUnAuth(data) {
      const userIds = []
      data.map(d => {
        userIds.push(d.id)
      })
      RoleApi.unAuthSysUser(userIds, this.$route.params.roleId).then(res => {
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        this.loadList(this.page.currentPage, this.page.size)
      })
    },
    handleSearch() {
      this.loadList(this.page.currentPage, this.page.size)
      this.$message.success('查询成功')
    },
    handleClearSearch() {
      this.form = {
        username: '',
        name: ''
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.loadList(this.page.currentPage, val)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.loadList(val, this.page.size)
    },
    handleDialogSearch() {
      this.loadDialogList(this.dialogPage.currentPage, this.dialogPage.size)
      this.$message.success('查询成功')
    },
    handleDialogClearSearch() {
      this.dialogForm = {
        username: '',
        name: ''
      }
    },
    handleOpenDialog() {
      this.dialog.visible = true
      this.loadDialogList(this.dialogPage.currentPage, this.dialogPage.size)
    },
    handleCloseDialog() {
      this.dialog.visible = false
    },
    diaLogSelectedChange(selectedList) {
      this.dialogSelectedList = JSON.parse(JSON.stringify(selectedList))
    },
    handleSubmit(data) {
      const userIds = []
      data.map(d => {
        userIds.push(d.id)
      })
      RoleApi.authSysUser(userIds, this.$route.params.roleId).then(res => {
        this.$message({
          message: '授权成功',
          type: 'success'
        })
        this.loadList(this.page.currentPage, this.page.size)
        this.dialog.visible = false
      })
    }
  }
}
</script>

<style scoped>
.g-row{
  margin-top: 10px;
}
.g-button{
  margin: 0;
  padding: 0;
  width: 40px
}
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>
